<template>
    <div class="settingDailog" :class="dailogShow ? 'active' : ''">
        <div class="settingDailog_containers">
            <div class="settingDailog_content">
                <div class="settingDailog_content_item">
                    <div class="settingDailog_content_item_title">
                        业务导航
                    </div>
                </div>
                <div class="settingDailog_content_item">
                    <div class="settingDailog_content_item_title">
                        病例信息
                    </div>
                </div>
                <div class="settingDailog_content_item">
                    <div class="settingDailog_content_item_title">
                        切片标注
                    </div>
                </div>
                <div class="settingDailog_content_item" @click="changeSettingStatus('setting')"
                    :class="settingStatus ? 'active' : ''">
                    <div class="settingDailog_content_item_title">
                        显示设置
                    </div>
                </div>
                <div class="settingDailog_content_item" @click="changeSettingStatus('visionControl')"
                    :class="visionControlStatus ? 'active' : ''">
                    <div class="settingDailog_content_item_title">
                        图像调节
                    </div>
                </div>
                <div class="settingDailog_content_item">
                    <div class="settingDailog_content_item_title">
                        切片操作
                    </div>
                </div>
                <div class="settingDailog_content_item">
                    <div class="settingDailog_content_item_title">
                        分屏浏览
                    </div>
                </div>
                <div class="settingDailog_content_item">
                    <div class="settingDailog_content_item_title">
                        AI辅助
                    </div>
                </div>
                <div class="settingDailog_content_item">
                    <div class="settingDailog_content_item_title">
                        实时会议
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name: 'moreSetting',
    props: {


    },
    data() {
        return {
            dailogShow: false,
            settingStatus: false,
            visionControlStatus: false,
        }
    },
    computed: {

    },
    created() {

    },
    mounted() {

    },
    methods: {
        open() {
            this.dailogShow = true
        },
        closed() {
            this.dailogShow = false
        },
        changeSettingStatus(type) {
            let obj
            if (type == 'setting') {
                this.settingStatus = !this.settingStatus
                obj = {
                    type: type,
                    status: this.settingStatus
                }
            } else if (type == 'visionControl') {
                this.visionControlStatus = !this.visionControlStatus
                obj = {
                    type: type,
                    status: this.visionControlStatus
                }
            }

            this.$emit("selectBtn", obj)
        },
        closeStatus(type) {
            if (type == 'setting') {
                this.settingStatus = false

            } else if (type == 'visionControl') {
                this.visionControlStatus = false

            }
        }

    }
}
</script>

<style lang="scss" scoped>
.settingDailog {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    position: absolute;
    width: 90px;
    top: 150px;
    right: 10px;
    z-index: 8;
    -webkit-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
    background-color: rgba(40, 49, 66, .7);
    border-radius: 5px;
    opacity: 0;
    height: 0px;
}

.settingDailog.active {
    opacity: 1;
    height: 420px;
}

.settingDailog_content_item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 10px;
    color: #fff;
    cursor: pointer;
}

.settingDailog_content_item.active {
    //color: rgb(58, 98, 215);
    background-color: rgb(58, 98, 215);
}
</style>

